// banner部分
.banner {
    background-color: #93c25e;
    padding-top: 4.5rem;

    .container {
        .company {
            display: flex;
            justify-content: space-between;

            .our {
                width: 50%;
                padding-top: 3rem;

                .title {
                    font-size: 2.5rem;
                    color: #fff;
                }

                p {
                    width: 80%;
                    margin-top: 3%;
                    font-size: 1rem;
                    color: #fff;
                    line-height: 1.6rem;
                }

                button {
                    margin: 5% 0;
                    padding: 1rem 2rem;
                    border-radius: 20rem;
                    border: 0;
                    font-size: 1rem;
                    color: #fff;
                    background-color: #252525;
                    transition: all .4s;

                    &:hover {
                        transform: translateY(-.5rem);
                        box-shadow: .1rem .2rem .5rem #252525;
                    }
                }
            }

            // 图片
            .light {
                align-self: flex-end;

                img {
                    width: 28vw;
                    vertical-align: bottom;
                }
            }
        }
    }

    @media screen and (max-width:1122px) {
        .container {
            .company {
                .light {
                    display: none;
                }

                .our {
                    width: 100%;
                    text-align: center;

                    p {
                        width: 100%;
                        text-align: center;
                        overflow: hidden;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 5;
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }
}

// 调查
.how {
    .container {
        padding-bottom: 3%;

        // 标题
        .title {
            padding-top: 4%;
            text-align: center;

            .can {
                color: #31364c;
                font-size: 2.8rem;
            }

            p {
                margin: 0 auto;
                width: 50%;
                margin-top: 0.18rem;
                color: #9699a6;
            }
        }

        // 图片
        .box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
            margin-top: 3%;

            .item {
                margin-top: 3%;
                width: 30%;
                text-align: center;

                .back {
                    margin: 0 auto;

                    img {
                        cursor: pointer;
                        flex-shrink: 0;
                        width: 25%;
                        text-align: center;
                        transition: all .4s;

                        &:hover {
                            transform: scale(1.1);
                        }
                    }
                }

                #back2 {
                    background-color: #f6f0e4;
                }

                // 文字
                .Solutions {
                    margin-top: 2rem;
                    font-size: 2rem;
                    cursor: pointer;
                    transform: all .4s;

                    &:hover {
                        color: #93c25e;
                        transform: scale(1.01);
                    }

                }

                p {
                    font-size: 1rem;
                    margin-top: 1rem;
                    cursor: pointer;

                    &:hover {
                        color: #93c25e;
                        transform: scale(1.01);
                    }
                }
            }
        }

    }

    @media screen and (max-width:992px) {
        .container {
            .title {

                p {
                    width: 90%;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
            }

            .box {
                .item {
                    width: 100%;
                    padding: 2rem;

                    p {
                        text-align: center;
                        width: 80%;
                        margin: 0 auto;
                    }
                }
            }
        }
    }

    @media screen and (max-width:349px) {
        .container {
            .title {
                .can {
                    font-size: 2rem;
                }
            }
        }
    }
}

// moniitor部分
.monitor {
    padding-top: 3%;
    background-color: #ff9700;
    padding-bottom: 3%;

    .container {
        .your {
            text-align: center;

            .title {
                color: #fff;
                font-size: 2.87rem;
            }

            p {
                width: 60%;
                margin: 0 auto;
                font-size: 1rem;
                color: #fff;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
            }
        }

        // 地图
        .plat {
            .boxs {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 3%;

                a {
                    width: 30%;
                    background-color: #ccc;

                    img {
                        width: 100%;
                        vertical-align: bottom;
                    }
                }
            }
        }

    }

    @media screen and (max-width:332px) {
        .container {
            .your {
                .title {
                    font-size: 2rem;
                }
            }
        }
    }
}


// meet部分
.meet {
    background-color: #fafafa;
    padding-top: 3%;

    .container {
        .title {
            text-align: left;

            .team {
                font-size: 2.8rem;
                color: #31364c;
            }

            // 标题
            .txt {
                margin-top: 1%;
                padding-bottom: 3%;
                display: flex;
                justify-content: space-between;

                p {
                    width: 50%;
                    font-size: 1rem;
                    color: #9699a6;
                }

                // 按钮
                .buttom {
                    span {

                        display: inline-block;
                        width: 0.5rem;
                        height: 0.5rem;
                        border-radius: 100%;
                        background-color: red;
                    }
                }
            }

        }




        .big {
            display: flex;
            justify-content: space-between;

            // 图片
            .photo {
                width: 24%;
                text-align: center;
                transition: all .5s;

                &:hover {
                    transform: scale(1.1);
                    box-shadow: 0rem .3rem 1rem #ccc;
                }

                .top {

                    background-color: #ccc;

                    img {

                        width: 100%;
                        vertical-align: bottom;
                    }
                }

                .center {
                    background-color: #f5f5f5;
                    // padding: 1.2rem 0;
                    padding: 5% 0;

                    .founder {
                        font-size: 1rem;
                        color: #cdcfd7;
                    }

                    .son {
                        color: #31364c;
                        font-size: 1.2rem;
                    }
                }

                .button {
                    background-color: #fff;
                    padding: 5% 0;
                    font-size: 0.9rem;
                    line-height: 2rem;

                    color: #9699a6;
                }

                .logo3 {
                    background-color: #fff;
                    border-top: 1px solid #ccc;
                    padding: 8% 0;

                    flex-shrink: 0;

                    img {
                        width: 10%;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }

    @media screen and (max-width:741px) {
        .container {
            .title {
                .txt {
                    p {
                        width: 80%;
                        // background-color: red;
                    }
                }
            }
        }
    }

    @media screen and (max-width:572px) {
        .container {
            .big {
                flex-wrap: wrap;
                justify-content: space-around;

                .photo {
                    width: 40%;
                    margin-top: 2rem;
                }
            }
        }
    }

    @media screen and (max-width:442px) {
        .container {
            .big {
                flex-wrap: wrap;
                justify-content: space-around;

                .photo {
                    width: 60%;

                    // margin-top: 2rem;
                    .button {
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        display: -webkit-box;
                    }
                }
            }
        }
    }


    @media screen and (max-width:417px) {
        .container {
            .title {
                .team {
                    text-align: center;
                    font-size: 2rem;
                }

                .txt {
                    p {
                        width: 80%;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;

                    }
                }
            }
        }
    }
}

// app页面
.app {
    background-color: #f04e4e;
    padding-top: 2%;
    margin-top: 4%;

    .container {
        .system {
            display: flex;
            justify-content: space-around;

            // 图片
            .apple {
                width: 50%;
                align-self: flex-end;
                text-align: center;

                img {

                    vertical-align: middle;
                    width: 50%;
                }
            }

            // logo
            .title {
                width: 50%;
                text-align: center;
                color: #fff;
                align-self: center;

                .down {
                    font-size: 1.5rem;
                }

                .smrt {
                    color: #ffffff;
                    font-size: 1.9;
                }

                .logos5 {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    text-align: center;
                    color: #fff;
                    align-content: center;

                    .iplhone {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        vertical-align: middle;
                        line-height: 1rem;
                        font-size: 1rem;
                        padding-top: 3%;

                        img {
                            width: 60%;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:528px) {
        .container {
            .system {
                .apple {
                    width: 40%;

                    img {
                        width: 50%;
                    }
                }

                .title {
                    width: 60%;

                    .down {
                        font-size: 1rem;
                    }
                }
            }
        }
    }

    @media screen and (max-width:439px) {
        .container {
            .system {
                .apple {
                    display: none;
                }

                .title {
                    text-align: center;
                    width: 100%;
                }
            }
        }
    }
}